<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>增加删除修改li</title>
		<style>
			#errMessage{
				color: orangered;
				font-size: 10px;
				font-family: "微软雅黑";
			}
			#successMessage{
				color: green;
				font-size: 10px;
				font-family: "微软雅黑";
			}
		    #fruit{border:1px dotted #ff0000;
		       ryo:e xpression(onfocus=function light (){
		       	with(document.all.oText){
		       		style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");
		       		timer=setTimeout(light,500);
		       		  }
		       		},onblur=function(){
		       			this.style.borderColor="#ff0000";clearTimeout(timer)
		       			   }
		       			  )
		       			}  
		</style>
		
	</head>
	<body>
		<ul id="scott">
			<li>苹果</li>
			
		</ul>
		<input id="fruit" /><span id="errMessage"></span>
		<span id="successMessage"></span>
	<br/>
	<br/>
		<input type="button" value="增加" onclick="add();"/>
		<input type="button" value="删除" onclick="del();"/>
		<input type="button" value="修改" onclick="edit();"/>
			
	</body>
	<script>
		function edit(){
			var fruit=document.getElementById("fruit").value;
			if(fruit=="香蕉"){
				document.getElementById("scott").children[0].textContent=fruit;
			}
		}
		function del(){
			f=document.getElementById("fruit").value;
			var liEl=document.getElementById("scott").children;
			for(var index=0;index<=liEl.length-1;index++){
				var li=liEl[index];
				var livar=li.textContent;
				if(f==livar){
					if(confirm("你确定要删除吗？")){
					li.remove();
					document.getElementById("successMessage").textContent="删除成功！";
					document.getElementById("fruit").value="";
					document.getElementById("fruit").focus();
					
					
					break;
					}
				
				}
				document.getElementById("successMessage").textContent="删除失败！";
				document.getElementById("fruit").value="";
					document.getElementById("fruit").focus();
			}
			document.getElementById("successMessage").textContent="";
			
		}
		function add(){
			f=document.getElementById("fruit").value;
			if(f==''){
				document.getElementById("errMessage").textContent="输入的水果不能为空！";
				document.getElementById("fruit").focus();
				
				return;
			}
			//拿到ul的，添加一个儿子元素。
			var scott=document.getElementById("scott");
			var liElement=document.createElement("li");
			liElement.value=f;
			//验证水果的重复性
			var result=ck();
			if(result){
				document.getElementById("errMessage").textContent="输入的水果不能重复！";
				document.getElementById("fruit").focus();
				document.getElementById("fruit").value="";
				return;
				
			}
			liElement.innerHTML=f;
			document.getElementById("scott").appendChild(liElement);
			document.getElementById("errMessage").textContent="";
			document.getElementById("fruit").value="";
		}
		function ck(){
			f=document.getElementById("fruit").value;
			var scottElement=document.getElementById("scott");
			var liElement=scottElement.children;
			for(var index=0;index<=liElement.length-1;index++){
				var li=liElement[index].innerText;
				if(f==li){
					
				return true;

				}
			}
			return false;
		}
		
	</script>
</html>
